<template>
    <div id="home">
        <FullCalendar :options="options" />
    </div>
</template>
<script>
    import FullCalendar from '@fullcalendar/vue';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import listPlugin from '@fullcalendar/list';
    import interactionPlugin from '@fullcalendar/interaction';
    import tippy from "tippy.js";
    import 'tippy.js/dist/tippy.css';
    import 'tippy.js/themes/light.css';
    import 'tippy.js/animations/scale.css';
    import {getList} from '@/config/api/getData'
    export default {
        components:{
            FullCalendar
        },
        data(){
            return{
                options:{
                    // 使用的组件
                    plugins:[dayGridPlugin,timeGridPlugin,listPlugin,interactionPlugin],
                    // 控制头部
                    headerToolbar:{
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,timeGridWeek,timeGridDay,listWeek'
                    },
                    // 设置按钮中文
                    buttonText:{
                         today: '当天', 
                         prev: '前一天', 
                         next: '后一天',
                         dayGridMonth: 'dayGrid月',
                         dayGridWeek: 'dayGrid周',
                         timeGridWeek: 'timeGrid周',
                         timeGridDay:'timeGrid天',
                         listWeek: '周列表'
                    },
                    // 翻译成中文
                    locale:'zh-cn',
                    //设置整个日历高度
                    height: '600px',
                    // 设置日历中显示周次（一年中第几周）
                    weekNumbers:true,
                    // 是否显示天链接
                    navLinks:true,
                    // 跟随窗体变化而变化
                    handleWindowResize:true,
                    // 事件的背景颜色
                    eventColor: '#999',
                    // 事件的文本颜色
                    eventTextColor:'#e43d30',
                    //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
                    selectHelper: true,
                    //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
                    unselectAuto: true,
                    // 文本内容超出折叠
                    dayMaxEvents:true,
                    // 事件的拖拽
                    editable:true,
                    // 修改事件开始时间
                    eventStartEditable:true,
                    // 事件结束事件修改
                    eventDurationEditable:true,
                    // 是否允许用户通过单击或拖动选择日历中的对象，包括天和时间。
                    selectable:true,
                    //Event被拖动时的不透明度
                    dragOpacity: 0.5,
                    // 事件内容
                    events:[],
                    // 选中日历某个单元格，或者某一批单元格时触发。
                    select:this.handleselectClick,
                    // 点击日历中的某个事件时触发
                    eventClick:this.handleeventsClick,
                    // 事件查询
                    eventMouseEnter:this.mouseover,
                    eventDrop:this.handledrop,
                    dayClick: function(date, allDay, jsEvent, view) {
                        console.log("是什么事件");
                     var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期
                     alert(selDate);
                     $.fancybox({
                         //调用fancybox弹出层
 
                     });
                     },
                    // eventDrop : function( event, dayDelta, revertFunc ) {
                    //     //do something here...
                    //     console.log('eventDrop --- start ---');
                    //     console.log('eventDrop被执行，Event的title属性值为：', event.title);
                    //     if(dayDelta._days != 0){
                    //         console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
                    //     }else if(dayDelta._milliseconds != 0){
                    //         console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
                    //     }else{
                    //         console.log('eventDrop被执行，Event的start和end时间没有改变！');
                    //     }
                    //     //revertFunc();
                    //     console.log('eventDrop --- end ---');
                    //     // ...
                    // },
                    clickInfo:'',
                }
            }
        },
        mounted(){
            getList().then(res=>{
                console.log(res.data.data,"结果");
                res.data.data.forEach(item => {
                    this.options.events.push(item)
                });
            })
        },
        methods:{
            // 改
            handledrop(event,dayDelta,revertFunc){
                console.log("拖动");
                console.log(event.event,"总体");
                console.log(this,"指向");
                console.log(event.event.startStr,"时间");
                console.log(this.clickInfo,"查看");
                let title=prompt('请输入要修改的标题');
                this.clickInfo.event.setProp("title", title);
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.dialogFormVisible=false


                // console.log(event,dayDelta,revertFunc,"查看");
                //             //do something here...
                //     console.log(event,'eventDrop --- start ---');
                //     console.log('eventDrop被执行，Event的title属性值为：', event.event._def.title);
                //     if(event.delta.days != 0){
                //         console.log('eventDrop被执行，Event的start和end时间改变了：', event.delta.days+'天！');
                //     }else if(event.delta.milliseconds != 0){
                //         console.log('eventDrop被执行，Event的start和end时间改变了：', event.delta.milliseconds/1000+'秒！');
                //     }else{
                //         console.log('eventDrop被执行，Event的start和end时间没有改变！');
                //     }
                //     //revertFunc();
                //     console.log('eventDrop --- end ---');
                //     // ...
            },
            // 查
             mouseover:function (info) {
                // console.log(123465);
                console.log(info,"结果");
                tippy(info.el, {
                    content:info.event.title,
                    // id:info.event.id,
                    // tiele:info.event.title,
                    // start:info.event.startStr,
                    // end:info.event.endStr,
                    animation: 'scale',//显示动画
                     // theme:'light'//显示主题
                });
            },

            // 点击日历中的某个事件时触发（添加）
            handleselectClick(arg){
                let title = prompt('请输入事件名')
                let calendarApi = arg.view.calendar
                calendarApi.unselect() // clear date selection
                if (title) {
                    calendarApi.addEvent({
                        id: '',
                        title,
                        start: arg.startStr,
                        end: arg.endStr,
                        allDay: arg.allDay
                    })
                }
            },
            // 选中日历某个单元格，或者某一批单元格时触发。(删除)
            handleeventsClick(clickInfo){
                console.log(clickInfo,"查看");
                this.clickInfo= clickInfo
                this.dialogFormVisible=true
                if (confirm(`要删除的事件'${clickInfo.event.title}'`)) {
                    clickInfo.event.remove()
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
#home{
    padding: 0 100px;
}
</style>